<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            border: 0;
            box-sizing: border-box;
        }
        body {
            height: 3000px;
        }
        .header {
            position: fixed;
            top: -80px;
            left: 0px;
            width: 100%;
            height: 60px;
            background-color: skyblue;
            transition: all 0.3s;
        }
        .header h2 {
            width: 100%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            color: #fff;
        }
        .content {
            width: 200px;
            height: 200px;
            margin-top: 500px;
            background-color: red;
        }

    </style>
</head>
<body>
    <div class="header">
        <h2>我是顶部栏</h2>
    </div>
    <div class="content">
        <span>内容模块</span>
    </div>
    <script>
        // const header = document.querySelector('.header')
        // const content = document.querySelector('.content')
        // const contentStyle = window.getComputedStyle(content)
        // const contentMarginTop = parseInt(contentStyle.marginTop)
        
        // window.addEventListener('scroll', function(e){
        //     const y = document.documentElement.scrollTop
        //     header.style.top = y >= contentMarginTop ? 0 : '-80px'
        // })

        const header = document.querySelector('.header')
        const content = document.querySelector('.content')
        console.log(content.offsetTop);
        window.addEventListener('scroll', function(){
            const y = document.documentElement.scrollTop
            header.style.top = y >= content.offsetTop ? 0 : '-80px'
        })

    </script>
</body>
</html>